<template>
    <div class="app-container">

        <el-container>
          <el-main>
            <el-row>

              <el-col :span="5" :xs="24" style="margin-bottom: 10px">
                <el-row :gutter="24" class="card-line">
                  <p class="card-title">答题卡</p>
                  <el-tag :type="cardItemClass(item.finally)" plain v-for="(item,index) in list" :key="index" @click="ShowQu(item,index)">
                    {{ index + 1 }}
                  </el-tag>
                </el-row>

              </el-col>

              <el-col :span="18">
                <div>
                  <el-form ref="form" :data="this.list" label-width="80px">
                    <el-form-item>
                      <img :src="list[this.qucontent].url" width="500" height="auto">
                    </el-form-item>
                    <el-form-item class="qutitle" :label="quIndex">
                      {{this.list[this.qucontent].content}}
                    </el-form-item>
                    <!--单选-->
                    <div v-if="this.quType === '1'">
                      <el-form-item label="A:">
                        <el-radio  disabled  v-model="list[qucontent].uanswer" label="A" border>{{ this.list[this.qucontent].optionsA }}</el-radio >
                      </el-form-item>
                      <el-form-item label="B:">
                        <el-radio disabled  v-model="list[qucontent].uanswer" label="B" border>{{ this.list[this.qucontent].optionsB }}</el-radio>
                      </el-form-item>
                      <el-form-item label="C:">
                        <el-radio disabled  v-model="list[qucontent].uanswer" label="C" border>{{ this.list[this.qucontent].optionsC }}</el-radio>
                      </el-form-item>
                      <el-form-item label="D:">
                        <el-radio disabled  v-model="list[qucontent].uanswer" label="D" border>{{ this.list[this.qucontent].optionsD }}</el-radio>
                      </el-form-item>
                    </div>
                    <!--多选-->
                    <div v-if="this.quType === '2'">
                    <el-form-item>
                      <el-checkbox-group v-model="list[qucontent].unKnow">
                        <el-checkbox disabled  label="A" border>A: {{ this.list[this.qucontent].optionsA }}</el-checkbox>
                        <el-checkbox disabled  label="B" border>B: {{ this.list[this.qucontent].optionsB }}</el-checkbox>
                        <el-checkbox disabled  label="C" border>C: {{ this.list[this.qucontent].optionsC }}</el-checkbox>
                        <el-checkbox disabled  label="D" border>D: {{ this.list[this.qucontent].optionsD }}</el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                    </div>
                    <!--判断-->
                    <div v-if="this.quType === '3'">
                      <el-form-item>
                        <el-radio disabled  v-model="list[qucontent].uanswer" label="1" border>对</el-radio>
                        <el-radio disabled  v-model="list[qucontent].uanswer" label="2" border>错</el-radio>
                      </el-form-item>
                    </div>
                    <!--论述-->
                    <div v-if="this.quType === '4'">
                      <el-form-item label="答题区:">
                        <el-input disabled  type="textarea" v-model="list[qucontent].uanswer"></el-input>
                      </el-form-item>
                    </div>
                    <!--答案与是否正确-->
                    <el-form-item label="正确答案:">
                        {{ this.list[qucontent].answer }}
                    </el-form-item>
                    <el-form-item label="学生答案:">
                        {{ this.list[qucontent].uanswer }}
                    </el-form-item>
                    <el-form-item label="得分:">
                        {{ this.list[qucontent].getpoint }}
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
          
        <el-container>
          <el-footer>

          </el-footer>
        </el-container>




    </div>
  </template>
  <script>
  import api from '@/api/El/eluserPaper'
  export default {
    data() {
      return {
        list:null,
        fullscreenLoading: false,
        qucontent: 0 ,
        quType: '1',
        SelectCatche:[],
        ElUserPaperAnswer : {
          id:'',
          uanswer:'',
          url:'',
          quType:'',
          content:'',
          optionsA:'',
          optionsB:'',
          optionsC:'',
          optionsD:'',
          answer:'',
        },
        quIndex:''

      }
    },
    mounted() {
      const loading = this.$loading({
            lock: true,
            text: '正在载入......',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
            });
      this.doSomething()
      this.fetchData()
      loading.close()
    },

    methods: {
      fetchData(){
        api.InitQu(this.$route.query.id).then(resp =>{
          this.list = resp.data
            // 遍历数据，将quType替换成对应的题目类型,并注入多选题的答案
            this.list.forEach(element => {
                if(element.quType === "3"){
                    if(element.answer === "1"){
                    element.answer = "对"
                    }else{
                    element.answer = "错"
                    }
                    if(element.uanswer === "1"){
                    element.uanswer = "对"
                    }else if(element.uanswer === "2") {
                    element.uanswer = "错"
                    }else {
                    element.uanswer = "未检测到答案"
                    }
                }
                //注入多选题答案
                if(element.quType === "2"){
                    element.unKnow = element.answer.split('');
                }
                //验证答案
                if(element.quType === "1"||element.quType === "2"||element.quType === "3"){
                  if(element.answer === element.uanswer){
                  element.finally = "对"
                  }else{
                  element.finally = "错"
                  }
              }
              if(element.quType === "4"){
                  element.finally = "论述题比较特殊~需要老师批改打分~所以暂时无法查看结果"

              }
            });
        })
      },
      
      ShowQu(item,index){
        this.qucontent = index
        this.quType = item.quType
      },
      checkCommit(){
        this.$confirm('确认交卷?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.Commit()
        }).then((resp) => {
          this.$message.success(resp.message)
        })
      },
      Commit(){
        api.InsertList(this.list).then(resp => {
          this.$router.push('/work/Mywork');
        })
      },
      doSomething(){
        this.SelectCatche = []
        const index = this.qucontent+1
        this.quIndex = '第' + index + '题.'
      },

      //答题卡样式
      cardItemClass(o){
        if (o==="对") {
          return 'primary'
        }else if (o==="错") {
          return 'danger'
        }else {
          return 'info'
        }
      }
      
    },
    
    //页面监视器
    watch: {
    qucontent(newValue, oldValue) {
      this.doSomething()
    },

    
  }
  }
  </script>
<style lang="scss" scoped>
.app {
    text-align: center;
}
.qutitle{
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.card-line{
  padding-left: 10px
}
.card-line span {
  cursor: pointer;
  margin: 12px;
}
.card-title{
  background: #eee;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
}


</style>